<template>
  <page-frame :showNavBar="false" class="page-white">
    <div class="w h f-c a-i-c" style="background:var(--body-background-color)">
      <div class="w">
        <div class="w box-b p10 m-b10 p-t0">
          <div class="fs36 fs-w-b t-c m-b10 fs-m-y van-primary-title o8">Android Vue</div>

          <div class="fs24 fs-w-b t-c m-b10 fs-m-y c-p o4">用户登录</div>
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field v-model="username" name="user" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
              <van-field v-model="password" type="password" name="pass" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
              <van-button class="van-button-primary" round block type="primary"
                native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
          <div class="h-100 w"></div>
        </div>
      </div>
    </div>

  </page-frame>
</template>

<script>
import { tokenName } from '@/server/base.js';
import { login } from '@/api/login.js';
export default {
  data() {
    return {
      username: 'test',
      password: '1234',
    }
  },
  methods: {
    onSubmit(values) {
      login(values).then(res => {
        localStorage.setItem(tokenName, JSON.stringify(res));
        this.$router.push({ path: this.$route.query.redirect });
      }).catch(e=>{
        this.$toast.fail("账户或密码错误！")
      });
    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
</style>
